<!--  -->
<template>
  <div class="china-map">
    <div ref="chart" class="chart-wrapper"></div>
  </div>
</template>

<script>
export default {
  name: 'chinaMap',
  components: {},
  data() {
    return {
      mapData: []
    }
  },
  props: ['params'],
  computed: {},
  watch: {},
  methods: {
    init() {
      let _this = this
      this.handleData()
      this.myChart && this.myChart.clear()
      this.myChart = this.$echarts.init(this.$refs.chart)
      let option = this.getOption()
      this.myChart.setOption(option)
      this.myChart.on('click', function(params) {
        if (params.name == '北京市') {
          _this.$emit('mapClick', params.name)
        }
      })
    },
    handleData() {
      this.mapData = this.params
    },
    getOption() {
      let chinaGeoJson = require('../../assets/js/common/chinaGeo.json')
      this.$echarts.registerMap('china', chinaGeoJson)

      let option = {
        legend: {
          show: false,
          data: ['调用量']
        },
        tooltip: {
          formatter: function(params) {
            if (params.value) {
              return (
                params.seriesName + '<br/>' + params.name + '：' + params.value
              )
            } else {
              return params.seriesName + '<br/>' + params.name + '：' + 0
            }
          }
        },
        visualMap: [
          {
            show: false,
            type: 'piecewise',
            // orient: 'horizontal',
            right: '0',
            min: 0,
            // max: 200000000,
            bottom: '5',
            itemWidth: 30,
            itemHeight: 12,
            splitNumber: 6,
            icon: 'rect',
            align: 'left',
            pieces: [
              {
                min: 1250,
                color: '#16448f',
                label: '>1250'
              },
              {
                min: 1000,
                max: 1250,
                color: '#174891',
                label: '1000-1250'
              },
              {
                min: 750,
                max: 1000,
                color: '#1e6ac9',
                label: '750-1000'
              },
              {
                min: 500,
                max: 750,
                color: '#0d576f',
                label: '500-750'
              },
              {
                min: 250,
                max: 500,
                color: '#16468f',
                label: '250-500'
              },
              {
                min: 0,
                max: 250,
                color: '#153867',
                label: '<250'
              }
            ],
            textStyle: {
              color: '#aedcff'
            }
          }
        ],
        series: [
          {
            name: '调用量',
            type: 'map',
            map: 'china',
            zoom: '1.12',
            left: '10%',
            roam: false,
            silent: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#e7d9a4',
                areaColor: '#153867',
                borderColor: '#fff',
                borderWidth: 1,
                opacity: 0.9
              },
              emphasis: {
                areaColor: '#e7d9a4',
                opacity: 1
              }
            },
            data: this.mapData
          }
        ]
      }
      return option
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.chart-wrapper {
  width: 1079px;
  height: 675px;
}
</style>